<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script>
    // Object.defineProperty
    var obj = {
      a: 1,
      b: 2,
    };
    let arr = [1, 2, 3];
    let vue = {};
    function defineReactive(data, key, value) {
      Object.defineProperty(data, key, {
        get() {
          console.log('获取');
          return value;
        },
        set(neValue) {
          console.log('设置');
          value = neValue;
        },
      });
    }

    function observe(data) {
      Object.keys(data).forEach(function (key) {
        defineReactive(data, key, data[key]);
      });
    }
    observe(arr);
    console.log(1, obj);
    console.log(arr[1]);
    arr[2] = 36;
    console.log('arr[2]: ', arr[2]);
    // 发现没有打印get 和set
    // 后面更新的数据,没有办法劫持，导致数据更新，视图不更新， 双向绑定需要数据被劫持一次才会同步更新

    // Proxy: new Proxy(target, handle) 也就是下面的写法
// 创建了一个proxy时其实给目标对象是创建了一个中间层可以理解为透明的拦截器，这个拦截器不会改变原始对象只是监听所有对对象的操作，，他会通过handle对象中的trap方法去拦截各种操作，比如get的属性读取，set的拦截属性设置，在trap里面可以去控
// 制对原始对象的操作一般会配合reflect使用，确保原始对象的原生行为被正确处理
    // var obj = {
    //   a: 1,
    //   b: 2,
    // };

    // let vue = new Proxy(obj, {
    //   get(target, propkey, receiver) {
    //     console.log('获取');
    //     return Reflect.get(target, propkey, receiver);
    //   },
    //   set(target, propkey, value, receiver) {
    //     console.log('设置');
    //     return Reflect.set(target, propkey, value, receiver);
    //   },
    // });

    // console.log(1, vue);
    // vue.c = 'xcc';
    // console.log(2, vue);
    // console.log(3, vue.c);

    // new proxy 对后面添加的元素也可以劫持到
  </script>
  <body></body>
</html>
